<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/fangmama.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/swiper3.0.8.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <title>2.2</title>
</head>
<body ontouchstart="" class="height-full">
    <div class="contract-layout">
        <!--合同-->
        <div class="contract-nav">
            <a href="javascript:;" class="on">我有合同</a>
            <a href="javascript:;">我没有合同</a>
        </div>
        <div class="house-swiper">

            <div class="swiper-wrapper">
                <div class="swiper-list swiper-slide">
                    <div class="contract-model">
                        <div class="contract-list">
                            <span class="contract-tit">租期</span>
                            <div class="contarct-txt">
                                <select>
                                    <option>1个月</option>
                                    <option>2个月</option>
                                    <option>3个月</option>
                                    <option>4个月</option>
                                    <option>5个月</option>
                                    <option>6个月</option>
                                    <option>7个月</option>
                                    <option>8个月</option>
                                    <option>9个月</option>
                                    <option>10个月</option>
                                    <option>11个月</option>
                                    <option>12个月</option>
                                </select>
                            </div>
                            <span class="contarct-icon"><i class="iconfont">&#xe60b;</i></span>
                        </div>
                    </div>

                    <div class="contract-model">
                        <div class="contract-list contarct-border-bottom">
                            <span class="contract-tit">本次支付</span>
                            <div class="contarct-txt">
                                <select>
                                    <option>1个月</option>
                                    <option>2个月</option>
                                    <option>3个月</option>
                                    <option>4个月</option>
                                    <option>5个月</option>
                                    <option>6个月</option>
                                    <option>7个月</option>
                                    <option>8个月</option>
                                    <option>9个月</option>
                                    <option>10个月</option>
                                    <option>11个月</option>
                                    <option>12个月</option>
                                </select>
                            </div>
                            <span class="contarct-icon"><i class="iconfont">&#xe60b;</i></span>
                        </div>
                        <div class="contract-list">
                            <span class="contract-tit">房屋金额</span>
                            <div class="contarct-txt">
                                <input type="number" placeholder="请输入房租金额">
                            </div>
                            <span class="contarct-icon">元</span>
                        </div>
                    </div>

                    <div class="contract-model">
                        <div class="contract-list contarct-border-bottom">
                            <span class="contract-tit">押金</span>
                            <div class="contarct-txt">
                                <input type="number" placeholder="已交可不填">
                            </div>
                            <span class="contarct-icon">元</span>
                        </div>
                        <div class="contract-list">
                            <span class="contract-tit">水电煤</span>
                            <div class="contarct-txt">
                                <input type="number" placeholder="已交可不填">
                            </div>
                            <span class="contarct-icon">元</span>
                        </div>
                    </div>

                    <div class="contract-model">
                        <div class="contract-list">
                            <span class="contract-tit">到账时间</span>
                            <div class="contarct-txt">
                                <em>普通到账</em>
                            </div>
                        </div>
                    </div>

                    <div class="contract-warm">房租将在次日到达房东帐号，另外房妈妈将会收取1%的服务费</div>

                    <div class="contract-model contarct-mt0">
                        <div class="contract-list">
                            <span class="contract-tit">上传合同</span>
                            <span class="contarct-icon-right"><i class="iconfont">&#xe60c;</i></span>
                        </div>
                    </div>

                    <div class="mark-sub-time"><input type="button" value="下一步"></div>
                </div>
                <div class="swiper-list swiper-slide">
                    <div class="contract-model">
                        <div class="contract-list">
                            <span class="contract-tit">租期</span>
                            <div class="contarct-txt">
                                <select>
                                    <option>1个月</option>
                                    <option>2个月</option>
                                    <option>3个月</option>
                                    <option>4个月</option>
                                    <option>5个月</option>
                                    <option>6个月</option>
                                    <option>7个月</option>
                                    <option>8个月</option>
                                    <option>9个月</option>
                                    <option>10个月</option>
                                    <option>11个月</option>
                                    <option>12个月</option>
                                </select>
                            </div>
                            <span class="contarct-icon"><i class="iconfont">&#xe60b;</i></span>
                        </div>
                    </div>

                    <div class="contract-model">
                        <div class="contract-list contarct-border-bottom">
                            <span class="contract-tit">小区</span>
                            <div class="contarct-txt">
                                <input type="text" placeholder="所在小区">
                            </div>
                        </div>
                        <div class="contract-list contarct-border-bottom">
                            <span class="contract-tit">地址</span>
                            <div class="contarct-txt">
                                <input type="text" placeholder="如:X楼（小区）X单元X室">
                            </div>
                        </div>
                        <div class="contract-list contarct-border-bottom">
                            <span class="contract-tit">所在地</span>
                            <div class="contarct-txt">
                                <input type="text" placeholder="所在地">
                            </div>
                        </div>
                        <div class="contract-list">
                            <span class="contract-tit">户型</span>
                            <div class="contarct-txt">
                                <select>
                                    <option>2室0厅</option>
                                    <option>3室1厅</option>
                                    <option>1室1厅</option>
                                </select>
                            </div>
                        </div>
                        <div class="contract-list">
                            <span class="contract-tit">配套</span>
                            <div class="contarct-txt">
                                <select>
                                    <option>空调、床、冰箱、沙发</option>
                                    <option>空调、床</option>
                                    <option>空调、沙发、冰箱</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="contract-model">
                        <div class="contract-model">
                            <div class="contract-list">
                                <span class="contract-tit">本次支付</span>
                                <div class="contarct-txt">
                                    <select>
                                        <option>1个月</option>
                                        <option>2个月</option>
                                        <option>3个月</option>
                                        <option>4个月</option>
                                        <option>5个月</option>
                                        <option>6个月</option>
                                        <option>7个月</option>
                                        <option>8个月</option>
                                        <option>9个月</option>
                                        <option>10个月</option>
                                        <option>11个月</option>
                                        <option>12个月</option>
                                    </select>
                                </div>
                                <span class="contarct-icon"><i class="iconfont">&#xe60b;</i></span>
                            </div>
                            <div class="contract-list">
                                <span class="contract-tit">房屋金额</span>
                                <div class="contarct-txt">
                                    <input type="number" placeholder="请输入房租金额">
                                </div>
                                <span class="contarct-icon">元</span>
                            </div>
                        </div>
                        <div class="contract-list contarct-border-bottom">
                            <span class="contract-tit">押金</span>
                            <div class="contarct-txt">
                                <input type="number" placeholder="已交可不填">
                            </div>
                            <span class="contarct-icon">元</span>
                        </div>
                        <div class="contract-list">
                            <span class="contract-tit">水电煤</span>
                            <div class="contarct-txt">
                                <input type="number" placeholder="已交可不填">
                            </div>
                            <span class="contarct-icon">元</span>
                        </div>
                    </div>

                    <div class="contract-model">
                        <div class="contract-list">
                            <span class="contract-tit">到账时间</span>
                            <div class="contarct-txt">
                                <em>普通到账</em>
                            </div>
                        </div>
                    </div>

                    <div class="contract-warm">房租将在次日到达房东帐号，另外房妈妈将会收取1%的服务费</div>

                    <div class="contract-model contarct-mt0">
                        <div class="contract-list">
                            <span class="contract-tit">上传合同</span>
                            <span class="contarct-icon-right"><i class="iconfont">&#xe60c;</i></span>
                        </div>
                    </div>

                    <div class="mark-sub-time"><input type="button" value="下一步"></div>
                </div>

            </div>


        </div>

    </div>
</body>
</html>
<script>
    var mySwiper = new Swiper('.house-swiper',{
        speed:500,
        onSlideChangeStart: function(){
            $(".contract-nav a").removeClass('on')
            $(".contract-nav a").eq(mySwiper.activeIndex).addClass('on')
        }
    })
    $(".contract-nav a").on('touchstart mousedown',function(e){
        e.preventDefault()
        $(".contract-nav .on").removeClass('on')
        $(this).addClass('on')
        mySwiper.slideTo( $(this).index() )
    })
    $(".contract-nav a").click(function(e){
        e.preventDefault()
    })



</script>

